<template>
    <view>
        <custom-navbar :showTitle="true" backgroundColor="#ffffff" textColor="#ffffff" :showBack="true" :isCoverNav="false"></custom-navbar>
        <scroll-view :scroll-y="true" :style="{height: contentHeight + 'px'}">
            <view class="roomContainer">
                <view class="roomContainer-swiper">
                    <swiper class="swiper">
                        <swiper-item class="swiper-item">
                            <image src="https://image.shengxuankj.com/fronts/roomListBanner.png" mode="" />
                        </swiper-item>
                    </swiper>
                </view>
                <view class="roomContainer-info">
                    <view class="roomContainer-info-title">{{ homeStayDetail.title }}</view>
                    <view class="roomContainer-info-view">
                        <view class="status">{{ homeStayDetail.status == 1 ? '营业中' : '暂停营业' }}</view>
                        <text class="tips">周一至周日全天开放</text>
                    </view>
                    <view class="roomContainer-info-view">
                        <view class="site" @tap="goToMap">
                            <image src="https://image.shengxuankj.com/fronts/siteIcon.png" mode="" class="site-icon" />
                            <text>{{ homeStayDetail.address }}</text>
                        </view>
                        <image src="https://image.shengxuankj.com/fronts/telIcon.png" mode="" class="telIcon" @tap="goToCall"/>
                    </view>
                </view>
                <view class="roomContainer-tabs">
                    <up-tabs :list="tabslist" :current="selectedTab" @change="switchTab"></up-tabs>
                    <view class="roomList" v-if="selectedTab == 0">
                        <view class="roomList-item" @tap="goToRoomDetail(item.id)" v-for="(item, index) in rooms" :key="index">
                            <image
                                class="roomList-image"
                                :src="item.cover"
                                mode="aspectFill"
                                style="width: 194rpx; height: 168rpx"
                            ></image>

                            <view class="roomList-info">
                                <text class="roomList-title">{{ item.name }}</text>
                                <view v-if="item.config && item.config != ''" class="roomList-desc">
                                    <view v-for="(config, index) in jsonToArray('config', item.config)" :key="index">
                                        <text>{{ config.text }}</text> <text v-if="index != jsonToArray('config', item.config).length - 1">·</text>
                                    </view>
                                </view>
                                <view class="roomList-date">
                                    <text>￥ {{ item.price }}</text>
                                    <up-button plain shape="circle" color="rgba(57, 97, 54, 1)" class="roomList-date-btn" @tap.native.stop.prevent="goToBookPage(item)">
                                        开始预定
                                    </up-button>
                                </view>
                            </view>
                        </view>
                        <view v-if="rooms.length == 0">
                            <text>暂无宠物房间</text>
                        </view>
                    </view>
                    <view class="roomWxParse" v-if="selectedTab == 1">
                        <view class="roomWxParse-content">
                            
                            <view class="roomWxParse-content-desc">
                                <up-parse :content="richTextContent"></up-parse>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </scroll-view>
    </view>
</template>

<script setup lang="ts">
	import { onLoad } from '@dcloudio/uni-app'
import { ref, onMounted } from 'vue'
import customNavbar from '../../components/custom-navbar/index.vue'
// pages/rooms/rooms.js
import { roomListFun, hotelDetailFun } from '@/api/port'
import RoomDetail from '../roomDetail/roomDetail.vue'

const checkInDate = ref<string>('')
const checkOutDate = ref<string>('')


const tabslist = ref<any[]>([
  {
    name: '房源预订'
  },
  {
    name: '民宿简介'
  }
])

interface LoadOptions {
  [key: string]: any
}


// 响应式数据
const selectedTab = ref<number>(0)
const article = ref<string>('')

// 0: 房源预订, 1: 民宿简介
const rooms = ref<any[]>([])

const navHeight = ref<number>(uni.getStorageSync('navHeight') ? uni.getStorageSync('navHeight') : 88)

const richTextContent = ref<string>(``)

const navBarHeight = ref<number>(0)
const tabBarHeight = ref<number>(0)
const contentHeight = ref<number>(0)
const active = ref<string>('')
const tabsNav = ref<string>('')
// 工具函数
// const escape2Html = (str: string): string => {
//   const arrEntities: { [key: string]: string } = {
//     'lt': '<',
//     'gt': '>',
//     'nbsp': ' ',
//     'amp': '&',
//     'quot': '"'
//   }
//   return str.replace(/&(lt|gt|nbsp|amp|quot);/ig, (all, t) => {
//     return arrEntities[t]
//   })
// }

// 页面加载数据
// const loadPageData = (options: LoadOptions): void => {
//   // 页面加载
// //   article.value = escape2Html(richTextContent.value)
  
//   // 计算剩余可视高度
//   calculateContentHeight()
// }
// 计算主要内容区域的高度
const calculateContentHeight = (): void => {
  const systemInfo = uni.getWindowInfo()
  const windowHeight = systemInfo.screenHeight
  const navHeight = uni.getStorageSync('navHeight') ? uni.getStorageSync('navHeight') : 88
  const calculatedContentHeight = windowHeight - navHeight
  contentHeight.value = calculatedContentHeight
}

// 切换标签页
const switchTab = (e: any): void => {
    console.log(e)
    const index = e.index
    selectedTab.value = index
}
const showLoginPopup = ref<boolean>(false)
// 统一登录判断
const ensureLogin = (): boolean => {
    const app = getApp()
    console.log(app)
    const isLogin = app?.globalData?.token || uni.getStorageSync('token')
    if (!isLogin) {
        showLoginPopup.value = true
        return false
    }
    return true
}
// 开始预订
const goToBookPage = (e?: any): void => {
    if (!ensureLogin()) {
        return
    }
    // 构造房间数据
    const obj: any = {
        room_id: e.id,
        check_in: checkInDate.value,
        check_out: checkOutDate.value,
        num: 1,
        price: e.price
    }
    uni.navigateTo({
        url: `/subpackage/book/book?orderParmas=${encodeURIComponent(JSON.stringify(obj))}`
    })
}



// 跳转到房间详情
const goToRoomDetail = (room_id: string): void => {
  uni.navigateTo({
    url: '/subpackage/roomDetail/roomDetail?checkInDate=' + checkInDate.value + '&checkOutDate=' + checkOutDate.value + '&room_id=' + room_id
  })
}

// 标签页切换事件
const onChange = (): void => {
  console.log('占位：函数 onChange 未声明')
}
onLoad((options) => {
  checkInDate.value = options.checkInDate
  checkOutDate.value = options.checkOutDate
})

// 民宿接口
const homeStayDetail = ref({})
const getRoomDetail = async () => {
    const res = await hotelDetailFun()
    console.log(res)
    if(res.code == 1){
        homeStayDetail.value = res.data
    }
}
const getRoomList = async () => {
    const res = await roomListFun({
        type: 2
    })
    console.log(res)
    if(res.code == 1){
        rooms.value = res.data
    }
}

const jsonToArray = (key: string, jsonData: string) => {
    if(key == 'config'){
        return JSON.parse(jsonData)
    }
}

const goToMap = () => {
    if(homeStayDetail.value.latitude && homeStayDetail.value.longitude){
        uni.openLocation({
            latitude: Number(homeStayDetail.value.latitude),
            longitude: Number(homeStayDetail.value.longitude),
            name: homeStayDetail.value.name,
            address: homeStayDetail.value.address
        })
    }
}
const goToCall = () => {
    if(homeStayDetail.value.phone){
        uni.makePhoneCall({
            phoneNumber: homeStayDetail.value.phone
        })
    }
}
// 页面挂载时执行
onMounted(() => {
  calculateContentHeight()
  getRoomDetail()
  getRoomList()
})


</script>
<style>
/* pages/rooms/rooms.wxss */

.roomContainer {
    background-color: #f5f5f5;
    min-height: 100vh;
}

.roomContainer-swiper {
    width: 100%;
}

.swiper {
    width: 100%;
    padding: 0 30rpx;
    box-sizing: border-box;
    height: 426rpx;
}

.swiper .swiper-item {
    width: 100%;
    height: 100%;
}

.swiper .swiper-item image {
    width: 100%;
    height: 100%;
    border-radius: 10rpx;
}

.roomContainer-info {
    width: 100%;
    padding: 0 30rpx;
    box-sizing: border-box;
    margin-top: 24rpx;
}

.roomContainer-info .roomContainer-info-title {
    /** 文本1 */
    font-size: 36rpx;
    font-weight: bold;
    letter-spacing: 0px;
    line-height: 52.13rpx;
    color: rgba(19, 19, 19, 1);
}

.roomContainer-info .roomContainer-info-view {
    width: 100%;
    display: flex;
    align-items: baseline;
    justify-content: flex-start;
    margin-top: 12rpx;
}

.roomContainer-info .roomContainer-info-view .status {
    width: 88rpx;
    height: 35rpx;
    /** 文本1 */
    font-size: 24rpx;
    font-weight: 400;
    letter-spacing: 0px;
    /* line-height: 34.75rpx; */
    color: rgba(82, 145, 70, 1);
    background: rgba(188, 237, 185, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(82, 145, 70, 1);
    border-radius: 5rpx;
}

.roomContainer-info .roomContainer-info-view .tips {
    /** 文本1 */
    font-size: 24rpx;
    font-weight: 400;
    letter-spacing: 0px;
    line-height: 34.75rpx;
    color: rgba(153, 153, 153, 1);
    margin-left: 12rpx;
}

.roomContainer-info-view .site {
    width: calc(100% - 68rpx);
    height: 40rpx;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0 8rpx;
    box-sizing: border-box;
    border-radius: 5rpx;
    background-color: rgba(245, 247, 245, 1);
}

.roomContainer-info-view .site .site-icon {
    width: 32rpx;
    height: 32rpx;
}

.roomContainer-info-view .site text {
    /** 文本1 */
    font-size: 24rpx;
    font-weight: 400;
    letter-spacing: 0px;
    line-height: 34.75rpx;
    color: rgba(102, 102, 102, 1);
    margin-left: 12rpx;
}

.roomContainer-info-view .telIcon {
    width: 40rpx;
    height: 40rpx;
    margin-left: 30rpx;
}

/* .tabClass { */
/* } */

.tabsWrap .up-tabs__scroll {
    background-color: transparent;
}
.tabsNav .up-tabs__line {
    background-color: rgba(116, 140, 109, 1);
}

/* 民宿故事样式 */
.roomList {
    width: 100%;
    padding: 0 20rpx;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 20rpx;
    padding-bottom: 100rpx;
    margin-top: 30rpx;
}

.roomList-item {
    display: flex;
    background-color: white;
    border-radius: 20rpx;
    padding: 24rpx;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.roomList-image {
    border-radius: 12rpx;
    background-color: #f0f0f0;
    margin-right: 20rpx;
}

.roomList-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.roomList-title {
    font-size: 28rpx;
    font-weight: 600;
    color: #333;
    margin-bottom: 8rpx;
}

.roomList-desc {
    font-size: 24rpx;
    color: #666;
    line-height: 1.4;
    margin-bottom: 8rpx;
}

.roomList-date {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.roomList-date text {
    font-size: 28rpx;
    color: rgba(57, 97, 54, 1);
}
.roomList-date .roomList-date-btn {
    width: 176rpx !important;
    height: 54rpx !important;
    /** 文本1 */
    font-size: 28rpx !important;
    font-weight: 400;
    letter-spacing: 0px;
    line-height: 37.13rpx;
    color: rgba(57, 97, 54, 1);
    margin: 0 !important;
}

.roomWxParse {
    width: 100%;
    padding: 0 20rpx;
    box-sizing: border-box;
    padding-bottom: 100rpx;
    margin-top: 30rpx;
}
</style>
